<template>
    <div>
        <div class="in_bk"></div>
        <div style="background-color:rgba(255, 255, 255, 0.7);white-space: pre-line; ">
			<el-row type="flex"  align="middle" class="animate__animated animate__fadeInLeft title" >
                <el-col :span="2" :offset="1" style="	margin-top: 10rem;">
                    <div @click="isUpdateAvatar = true"><el-avatar :size="70" :src="this.$GLOBAL.avatar"></el-avatar></div>
                    <p>{{userInfo.pos}}</p>
                </el-col>
                <el-col :span="19" style="margin-top: 10rem;">
                    <span >{{userInfo.userName}}</span>
                </el-col>
				<el-col :span="2" v-if=this.$GLOBAL.isLogin>
				    <el-button  type="danger" size="medium" class="el-icon-arrow-right button" @click="logOut">退出</el-button>
				</el-col>
                <el-dialog
                  title="更换头像"
                  :visible.sync="isUpdateAvatar"
                  :append-to-body="true"
                  width="30%" v-if="this.$GLOBAL.isLogin">
                  <span style="text-align: center;">
					  <cutImageDialog @formData="getData"  :aspectRatio="1/1"/>
				  </span>
				  
                </el-dialog>
            </el-row>
            <!-- <hr style="color=black SIZE=3"> -->
            <el-row type="flex"  class=" animate__animated animate__fadeInLeft" style="margin-top:1%">
	
                <el-col  :span="3" :offset="1" style="background-color:white">
                    <el-menu active-text-color="#8787D4"  >
                        <el-menu-item index="1" class="detailList el-icon-arrow-right" @click="setVive('1')"> 个人资料</el-menu-item>
                        <el-menu-item index="2" class="detailList el-icon-arrow-right" @click="setVive('2')" v-if="this.$GLOBAL.isInsider"> 我的项目</el-menu-item>
                        <el-menu-item index="3" class="detailList el-icon-arrow-right" @click="setVive('3')" v-if="this.$GLOBAL.isInsider">参加的项目</el-menu-item>
                    </el-menu> 
                </el-col>
                <el-col :span="18" style="background-color:white;margin-left:15px;" >
					<template v-if="vive==='1'">
						<user @resData="getUserInfo"></user>
					</template>
                    
                    <template v-if="vive==='2'">
                        <myPro :proData="userInfo.proData"></myPro>
                    </template>
                    <template v-if="vive==='3'">
                        <partPro :proData="userInfo.proData"></partPro>
                    </template>
                </el-col>
				
            </el-row>
    </div>
        
    </div>
</template>

<script>
	
	import cutImageDialog  from '../components/cut.vue' 
	import user  from '../components/inforUser.vue' 
	import myPro  from '../components/inforMyPro.vue' 
	import partPro  from '../components/inforPartPro.vue' 
	
export default {
	components: {
	  cutImageDialog,
	  user,
	  myPro,
	  partPro
	},
    name: 'information',
    props: {},
   
    data:function () {
		
        
		
		return{
			imageUrl:"",
			isUpdateAvatar:false,
			
			
            vive:'1',
			
            userInfo:{
                name:"",
                pos:"普通用户",
                Id:"",
                introduction:"",
                sex:"",
                stuId:"",
                userName:"",
                connect:"",
                academy:"",
                major:"",
                proData: [{
                    ProId:"1",
                    ProName:"ese",
                    ProInfo:"ee",
                    members:["a ","b ","c "],
                },],
                awaData: [{
                    awaName:"",
                    awaLevel:"",
                    awaNo:"",
            
                },]
            },
            
           total:"",
			
			loading:false
        
    	}
	},
    
    created() {
    	this.vive = sessionStorage.getItem("inforVive") === null ? this.vive : sessionStorage.getItem("inforVive")
    },
    methods:{
		setVive(val){
			this.vive = val;
			sessionStorage.setItem('inforVive',val)
		},
		getUserInfo:function(val){
			this.userInfo = val;
			
		},
		getData:async function(file){
			// 
			this.loading = true;
			
			let res = await this.text(this.$api.uploadAvatar,file,"post")
			// let res = await this.$axios({
			// 		  method: "post",//指定请求方式
			// 		  url: this.$api.uploadAvatar,
			// 		  data: file
			// })
			
			if (res.code === 200) {
				this.$message({
					message: '修改成功',
					type: 'success'
					});
				location.reload();
				
			}else if (res.code === 50014) {
					
					this.$message.error('用户权限不足');
				}else {
					this.$message.error('请求失败或者接口返回失败');
			} 
			this.loading = false;
			
			
			
			// 
			},
		 
		logOut: function(){
            this.$confirm('确认退出登录？', '确认信息', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消'
            })
            .then(() => {
                this.$logOut()
                this.$router.push("index")
            });
           
        },

        
		
		
            
        
    }
}
</script>

<style scoped>
  @import url("../assets/style/info.css");
</style>